<template>
  <div class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
      <!-- 应用状态信息 -->
      <div v-if="appStatus.message" class="mb-4 p-4 rounded-lg" :class="appStatus.type">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i :class="appStatus.icon"></i>
          </div>
          <div class="ml-3">
            <p class="text-sm font-medium">{{ appStatus.message }}</p>
          </div>
        </div>
      </div>
      
      <!-- 任务表单 -->
      <div class="mb-8">
        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">添加新任务</h2>
        <TaskForm @task-added="onTaskAdded" />
      </div>
      
      <!-- 任务列表 -->
      <div>
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-gray-800 dark:text-white">任务列表</h2>
          <div class="text-sm text-gray-500 dark:text-gray-300">
            已完成: {{ taskStore.completedCount }} / 总数: {{ taskStore.taskCount }}
          </div>
        </div>
        
        <!-- 过滤和搜索 -->
        <div class="flex flex-wrap gap-4 mb-4">
          <div class="flex space-x-2">
            <button 
              @click="setFilter('all')" 
              :class="{ 'bg-blue-500 text-white': taskStore.filter === 'all' }"
              class="px-4 py-2 rounded-md text-sm"
            >
              全部
            </button>
            <button 
              @click="setFilter('pending')" 
              :class="{ 'bg-blue-500 text-white': taskStore.filter === 'pending' }"
              class="px-4 py-2 rounded-md text-sm"
            >
              待办
            </button>
            <button 
              @click="setFilter('completed')" 
              :class="{ 'bg-blue-500 text-white': taskStore.filter === 'completed' }"
              class="px-4 py-2 rounded-md text-sm"
            >
              已完成
            </button>
          </div>
          
          <div class="relative flex-1 max-w-md">
            <input
              type="text"
              v-model="searchQuery"
              @input="setSearchQuery"
              placeholder="搜索任务..."
              class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
            >
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              <i class="fas fa-search text-gray-400"></i>
            </div>
          </div>
        </div>
        
        <!-- 任务列表组件 -->
        <TaskList 
          :tasks="taskStore.filteredTasks" 
          @task-updated="onTaskUpdated"
          @task-deleted="onTaskDeleted"
          @tasks-cleared="onTasksCleared"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TaskForm from '../components/TaskForm.vue';
import TaskList from '../components/TaskList.vue';
import { useTaskStore } from '../stores/taskStore';

// 导入任务状态管理
const taskStore = useTaskStore();
const searchQuery = ref('');

// 应用状态
const appStatus = ref({
  message: '',
  type: '',
  icon: ''
});

// 显示状态消息
const showStatus = (message, type, icon) => {
  appStatus.value = { message, type, icon };
  // 3秒后自动清除状态消息
  setTimeout(() => {
    appStatus.value = { message: '', type: '', icon: '' };
  }, 3000);
};

// 任务添加事件处理
const onTaskAdded = (newTask) => {
  taskStore.addTask(newTask);
  showStatus('任务已添加', 'bg-green-50 dark:bg-green-900/20', 'text-green-500 fas fa-check-circle');
};

// 任务更新事件处理
const onTaskUpdated = (updatedTask) => {
  taskStore.updateTask(updatedTask);
  showStatus('任务已更新', 'bg-blue-50 dark:bg-blue-900/20', 'text-blue-500 fas fa-info-circle');
};

// 任务删除事件处理
const onTaskDeleted = (taskId) => {
  taskStore.deleteTask(taskId);
  showStatus('任务已删除', 'bg-yellow-50 dark:bg-yellow-900/20', 'text-yellow-500 fas fa-exclamation-triangle');
};

// 清除所有任务事件处理
const onTasksCleared = () => {
  taskStore.clearCompletedTasks();
  showStatus('已清除所有已完成任务', 'bg-red-50 dark:bg-red-900/20', 'text-red-500 fas fa-exclamation-circle');
};

// 设置过滤
const setFilter = (filter) => {
  taskStore.setFilter(filter);
};

// 设置搜索
const setSearchQuery = () => {
  taskStore.setSearchQuery(searchQuery.value);
};

// 加载任务
taskStore.loadTasks();
</script>

<style scoped>
/* 添加一些基本样式 */
main {
  transition: all 0.3s ease;
}

h1, h2 {
  transition: color 0.3s ease;
}

.status-message {
  transition: all 0.3s ease;
}
</style>
